<template>
  <div class="article-page-top">
    <div class="type">RESEARCH-ARTICLE</div>
    <div class="article-name" :title="name">
      <h1 v-html="name"></h1>
    </div>
    <div class="date" :title="date">{{date}}</div>
    <div class="line"></div>
    <div class="authors">
      <h4>Authors:</h4>
      <div class="author" v-for="author of authors" :key="author.name">
        <author :author="author"></author>
      </div>
    </div>
    <div v-if="publication" class="publication" :title="`publication: ${publication.name}`">{{publication.name}}</div>
    <div class="line"></div>
    <div class="hot-pdf">
      <hot-level :hot-level="hotLevel"></hot-level>
      <a class="pdf" :href="pdf_link" v-if="pdf_link !== ''" title="Get-Pdf">
        <svg>
          <use href="#icon-document" />
        </svg>
        <span>Get File</span>
      </a>
      <a v-else href="javascript:void(0)" class="no-pdf" title="no-pdf">
        <svg>
          <use href="#icon-document" />
        </svg>
        <span>No File</span>
      </a>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
import '@/assets/icons/document.svg';

import Author from '@/components/Pieces/Author/AuthorItem';
import HotLevel from '@/components/Pieces/HotLevel/index';

export default {
  name: "ArticlePageTop",
  props: {
    msg: {
      name: String,
      authors: Array,
      publication: Object,
      hotLevel: Number,
      pdf_link: String,
      date: String
    },
  },
  data() {
    return {

    };
  },
  computed: {
    name() {
      try {
        return this.msg.name;
      } catch(err) {
        return '';
      }
    },
    date() {
      try {
        return this.msg.date;
      } catch(err) {
        return '';
      }
    },
    authors() {
      try {
        return this.msg.authors;
      } catch(err) {
        return [];
      }
    },
    publication() {
      try {
        return this.msg.publication;
      } catch(err) {
        return null;
      }
    },
    hotLevel() {
      try {
        return this.msg.hotLevel;
      } catch(err) {
        return 0;
      }
    },
    pdf_link() {
      try {
        return this.msg.pdf_link;
      } catch(err) {
        return '';
      }
    },
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    showMsg() {
      console.log(this.msg);
    }
  },
  components: {
    Author,
    HotLevel
  },
};
</script>

<style scoped lang="scss">
  .article-page-top {
    svg {
      margin-right: 3px;
    }

    & > div {
      margin-bottom: 10px;
    }
    .type {
      color: #757575;
      font-size: 12px;
      font-weight: 400;
    }

    .article-name {
      font-size: 26px;
    }

    .date {
      text-align: right;
    }

    .authors {
      display: flex;
      // margin-left: -5px ;
      align-items: center;
      flex-wrap: wrap;
      h4 {
        margin-right: 10px;
      }

      .author {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
    }

    .publication {
      color: rgb(76, 129, 24);
    }

    .hot-pdf {
      display: flex;
      align-items: center;
      justify-content: space-between;

      >.hot-level {
        font-size: 19px;
      }

      .pdf {
        display: flex;
        align-items: center;
        font-size: 18px;
        background-color: #5eb600;
        color: #fff;
        padding: 7px 18px 8px 19px;
        margin: 0 5px;
        border-radius: 2px;
        transition: ease-in-out .25s;
        a {
          color: #fff;
        }

        &:hover {
          background-color: #00b68fc7;
          color: #000000;
        }
      }

      .no-pdf {
        display: flex;
        align-items: center;
        font-size: 18px;
        background: #888888;
        color: #fff;
        padding: 7px 18px 8px 19px;
        margin: 0 5px;
        border-radius: 2px;
        cursor:not-allowed;
        a {
          color: #fff;
        }
      }
    }
  }
</style>
